<template>
  <basic-container>
    <avue-tabs :option="tabOption" @change="tabChange"></avue-tabs>
    <div v-if="type.prop==='company'">
      <avue-crud
        :option="optionCompany"
        :data="dataCompany"
        :page="comPage"
        v-model="comForm"
        @search-change="comSearchChange"
        @search-reset="comSearchReset"
        @current-change="comCurrentChange"
        @size-change="comSizeChange"
        @on-load="companyOnLoad"
      >
        <template slot="state" slot-scope="{row}">
          <span>{{row.sexName}}</span>
        </template>
        <template slot="menu" slot-scope="{row}">
          <span v-if="row.cashid == '1'">
            <el-tag size="small" class="pointer mr10" @click="comCheckFn(row.id, 2)">通过</el-tag>
            <el-tag size="small" class="pointer" type="warning" @click="comCheckFn(row.id, 3)">退回</el-tag>
          </span>
          <el-tag size="small" type="info" v-else>{{row.state}}</el-tag>
        </template>
      </avue-crud>
    </div>
    <div v-else-if="type.prop==='personal'">
      <avue-crud
        :option="optionPersonal"
        :data="dataPersonal"
        :page="perPage"
        v-model="form"
        @search-change="searchChange"
        @search-reset="searchReset"
        @selection-change="selectionChange"
        @current-change="currentChange"
        @size-change="sizeChange"
        @on-load="personerOnLoad"
      >
        <template slot="state" slot-scope="{row}">
          <span>{{row.sexName}}</span>
        </template>
      </avue-crud>
    </div>
  </basic-container>
</template>

<script>
import {
  getCompanyWidthraw,
  getUserWidthraw,
  approvalCompany,
  update,
  getNotice
} from "@/api/dept/user";
import { mapGetters } from "vuex";
import { getToken } from "@/util/auth";
export default {
  data() {
    return {
      type: {
        prop: "company"
      },
      tabOption: {
        column: [
          {
            icon: "el-icon-info",
            label: "公司",
            prop: "company"
          },
          {
            icon: "el-icon-warning",
            label: "个人",
            prop: "personal"
          }
        ]
      },
      comForm: {},
      form: {},
      comPage: {
        pageSize: 10,
        currentPage: 1,
        total: 0
      },
      perPage: {
        pageSize: 10,
        currentPage: 1,
        total: 0
      },
      selectionList: [],
      optionCompany: {
        tip: false,
        addBtn: false,
        border: true,
        index: false,
        viewBtn: false,
        selection: false,
        columnBtn: false,
        refreshBtn: false,
        searchBtn: false,
        editBtn: false,
        delBtn: false,
        menu: true,
        column: [
          {
            label: "公司ID",
            prop: "id",
            row: true,
            search: true
          },
          {
            label: "公司名称",
            prop: "name",
            row: true,
            search: true
          },
          {
            label: "状态",
            slot: true,
            prop: "state",
            dicData: [
              {
                value: "",
                label: "全部"
              },
              {
                value: "1",
                label: "未通过"
              },
              {
                value: "2",
                label: "已通过"
              }
            ],
            type: "radio",
            row: true,
            hide: true,
            search: true
          },
          {
            label: "提现金额",
            prop: "amount",
            row: true
          },
          {
            label: "提现申请时间",
            prop: "time",
            row: true
          }
        ]
      },
      dataCompany: [],

      optionPersonal: {
        tip: false,
        addBtn: false,
        border: true,
        index: false,
        viewBtn: false,
        selection: false,
        columnBtn: false,
        refreshBtn: false,
        searchBtn: false,
        editBtn: false,
        menu: false,
        column: [
          {
            label: "微信账号",
            prop: "wechatAccount",
            row: true,
            search: true
          },
          {
            label: "手机号",
            prop: "telephone",
            row: true,
            search: true
          },
          {
            label: "是否转账",
            slot: true,
            prop: "state",
            dicData: [
              {
                value: "1",
                label: "未完成"
              },
              {
                value: "2",
                label: "已完成"
              }
            ],
            type: "radio",
            row: true,
            hide: true,
            search: true
          },
          {
            label: "提现金额",
            prop: "account",
            row: true
          },
          {
            label: "抽成金额(比例‰)",
            prop: "backAccount",
            row: true
          },
          {
            label: "转账金额",
            prop: "blance",
            row: true
          },
          {
            label: "申请提交时间",
            prop: "cashTime",
            row: true
          }
        ]
      },
      dataPersonal: [],
      isRefresh: true
    };
  },
  created() {
    this.type = this.option.column[0];
  },
  computed: {
    ...mapGetters(["permission"]),
    permissionList() {
      return {
        addBtn: this.vaildData(this.permission.notice_add, false),
        viewBtn: this.vaildData(this.permission.notice_view, false),
        delBtn: this.vaildData(this.permission.notice_delete, false),
        editBtn: this.vaildData(this.permission.notice_edit, false)
      };
    },
    ids() {
      let ids = [];
      this.selectionList.forEach(ele => {
        ids.push(ele.id);
      });
      return ids.join(",");
    }
  },
  methods: {
    //   tab 切换
    tabChange(column) {
      this.type = column;
      if (this.type.prop == "personal" && this.isRefresh) {
        this.isRefresh = false;
        this.personerOnLoad(this.perPage);
      }
    },

    // 个人搜索重置
    searchReset() {
      this.perPage.currentPage = 1;
      this.personerOnLoad(this.perPage);
    },

    // 个人搜索
    searchChange(params) {
      this.perPage.currentPage = 1;
      this.personerOnLoad(this.perPage, params);
    },

    selectionChange(list) {
      this.selectionList = list;
    },

    currentChange(currentPage) {
      this.perPage.currentPage = currentPage;
    },
    sizeChange(pageSize) {
      this.perPage.pageSize = pageSize;
    },

    // 个人提现
    personerOnLoad(perPage, params = {}) {
      const param = {
        size: perPage.pageSize,
        current: perPage.currentPage,
        wxcode: params.wechatAccount || "",
        phone: params.phone || "",
        state: params.state || ""
      };
      getUserWidthraw(param).then(res => {
        const data = res.data.data;
        this.perPage.total = data.total;
        this.dataPersonal = data.records;
      });
    },

    // 公司-搜索重置
    comSearchReset() {
      this.comPage.currentPage = 1;
      this.companyOnLoad(this.comPage);
    },
    // 公司-搜索
    comSearchChange(params) {
      this.comPage.currentPage = 1;
      this.companyOnLoad(this.comPage, params);
    },

    // 公司 - 页面切换
    comCurrentChange(currentPage) {
      this.comPage.currentPage = currentPage;
    },

    // 公司 - 页面size
    comSizeChange(pageSize) {
      this.comPage.pageSize = pageSize;
    },

    // 公司提现
    companyOnLoad(comPage, params = {}) {
      const param = {
        size: comPage.pageSize,
        current: comPage.currentPage,
        id: params.id || "",
        name: params.tenantName || "",
        state: params.state || ""
      };

      getCompanyWidthraw(param).then(res => {
        const data = res.data.data;
        this.comPage.total = data.total;
        this.dataCompany = data.records;
      });
    },

    // 公司审批
    comCheckFn(id, type) {
      this.$confirm("确定审核通过?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "info"
      })
        .then(() => {
          const param = {
            id: id,
            state: type
          };
          return approvalCompany(param);
        })
        .then(() => {
          this.companyOnLoad(this.comPage);
          this.$message({
            type: "success",
            message: "操作成功!"
          });
        });
    }
  }
};
</script>

<style>
.avue-tabs {
  padding-top: 0;
}
.pointer {
  cursor: pointer;
}

.mr10 {
  margin-right: 10px;
}
</style>
